<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-07-25 11:48:10
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-24 09:12:48
-->
<template>
  <el-card>
    <template
      v-if="slotHeader"
      #header
    >
      <slot name="header" />
    </template>
    <slot />
    <Pagination
      :current-page="props.currentPage"
      :page-size="props.pageSize"
      :total="props.total"
      :load-list="loadList"
      :layout="props.layout"
      @update:current-page="handleCurrentChange"
      @update:page-size="handleSizeChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { PropType, useSlots } from 'vue'

const slotHeader = !!useSlots().header

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  loadList: {
    type: Function as PropType<(...args: any[]) => void>,
    default: () => {}
  },
  layout: {
    type: String,
    default: 'sizes, total, prev, pager, next, jumper'
  }
})

interface EmitsType{
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
}
const emits = defineEmits<EmitsType>()

const handleCurrentChange = (page:number) => {
  emits('update:currentPage', page)
}
const handleSizeChange = (size:number) => {
  emits('update:pageSize', size)
}
</script>

<style scoped lang="scss">
.pagination{
  margin-top: 20px;
}
</style>
